<template>
	<view :class="['nav-box',isShow?'nav-back':'',origin === 'default' ? 'nav-color' : origin === 'Detail' ? 'nav-Detail' : '']" 
		  :style="{'height':height+'px'}"
		  >
	      <!-- 自定义导航栏 -->
	      <view class="status_bar" :style="{'height':statusBarHeight+'px'}">
	        <!-- uni-ui这里是状态栏 -->
	      </view>
	      <!-- 胶囊位置信息 -->
	      <view class="nav-main" 
		  :style="{height: navBarHeight + 'px'}">
			<view  class="text" :style="{'color': isShow ? '#fff':'#333'}">
				{{ obj.text ||text }}
			</view>
	      </view>
	    </view>

</template>

<script>
	export default {
		name:'navigationBar',
		props:{
			origin:{
				type:String,
				default:'main'
			},
			text:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				//总高度
			    height: 0,
			    //胶囊位置信息
			    menuButtonRect: {},
			    //状态栏的高度
			    statusBarHeight: 0 ,
			    //导航栏的高度
			    navBarHeight: 0,
				isShow:false,
				obj:{
					text:''
				}
			}
		},
		created(){
			this.getSystemInfo()
		},
		
		
		
		methods:{
			setTitleText(data){
				this.$set(this.obj,'text',data)
			},
			getSystemInfo(){
				let sysInfo = tt.getSystemInfoSync();
				this.statusBarHeight = sysInfo.statusBarHeight; 
				// 胶囊位置信息
				let rect = tt.getMenuButtonBoundingClientRect();
				this.menuButtonRect = JSON.parse(JSON.stringify(rect));
				// 导航栏高度
				let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
				this.navBarHeight = navBarHeight;
				// 自定义导航栏的高度
				this.height = sysInfo.statusBarHeight + navBarHeight;
				
				if(this.origin === 'Detail'){
					this.isShow = !uni.getStorageSync('daylight')
				}
			},
			
			setBackground(type){
				this.isShow = type === 'one' ? true : false
			}
		}
	
	}
</script>

<style lang="less" scoped>
	.nav-back{
		background-color: #3D3D3D !important;
	}
	.nav-Detail{
		background: @color-subtle;
	}
	.nav-color{
		background: #FFF;
	}
	.nav-box{
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 100;
	}
	.status_bar {
        width: 100%;
    }
	.nav-main{
		display: flex;
		align-items: center;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 34rpx;
		margin-left: 100rpx;
	}
	
	.text{
		width: 260rpx;
		height: 46rpx;
		line-height: 46rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	
</style>